<template>
    <div class="container">
        <div class="page-header">

            <div class="detail">
                <div class="avatar"><img src="../../assets/user.jpg" alt="" width="80" height="80"></div>
                <div class="main">
                    <div class="row">
                        <div class="content">
                            <div class="title">早上好，ICZER，我猜你可能累了</div>
                            <div>前端工程师 | 蚂蚁金服-计算服务事业群-VUE平台</div>
                        </div>
                        <Row class-name="head-info">
                            <Col span="8">
                            <span>项目数</span>
                            <p>56</p>
                            <span class="border"></span>
                            </Col>
                            <Col span="8">
                            <span>团队内排名</span>
                            <p>56/350</p>
                            <span class="border"></span>
                            </Col>
                            <Col span="8">
                            <span>项目访问</span>
                            <p>56,567</p>
                            </Col>
                        </Row>
                    </div>
                </div>
            </div>
        </div>
        <Row :gutter="14">
            <Col span="16">
            <Card>
                <p slot="title">进行中的项目</p>
                <a href="javascript:;" slot="extra">全部项目</a>
                <div class="cards clearfix">
                    <Card class="card_content">
                        <p class="card-title">
                            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <a href="javascript:;">Alipay</a>
                        </p>
                        <p class="project-item">那是一种内在的东西，他们到达不了，也无法触及的</p>
                        <div class="project-item">
                            <a href="/#/">科学搬砖组</a>
                            <span class="datetime">9小时前</span>
                        </div>
                    </Card>
                    <Card class="card_content">
                        <p class="card-title">
                            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <a href="javascript:;">Alipay</a>
                        </p>
                        <p class="project-item">那是一种内在的东西，他们到达不了，也无法触及的</p>
                        <div class="project-item">
                            <a href="/#/">科学搬砖组</a>
                            <span class="datetime">9小时前</span>
                        </div>
                    </Card>
                    <Card class="card_content">
                        <p class="card-title">
                            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <a href="javascript:;">Alipay</a>
                        </p>
                        <p class="project-item">那是一种内在的东西，他们到达不了，也无法触及的</p>
                        <div class="project-item">
                            <a href="/#/">科学搬砖组</a>
                            <span class="datetime">9小时前</span>
                        </div>
                    </Card>
                    <Card class="card_content">
                        <p class="card-title">
                            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <a href="javascript:;">Alipay</a>
                        </p>
                        <p class="project-item">那是一种内在的东西，他们到达不了，也无法触及的</p>
                        <div class="project-item">
                            <a href="/#/">科学搬砖组</a>
                            <span class="datetime">9小时前</span>
                        </div>
                    </Card>
                    <Card class="card_content">
                        <p class="card-title">
                            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <a href="javascript:;">Alipay</a>
                        </p>
                        <p class="project-item">那是一种内在的东西，他们到达不了，也无法触及的</p>
                        <div class="project-item">
                            <a href="/#/">科学搬砖组</a>
                            <span class="datetime">9小时前</span>
                        </div>
                    </Card>
                    <Card class="card_content">
                        <p class="card-title">
                            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <a href="javascript:;">Alipay</a>
                        </p>
                        <p class="project-item">那是一种内在的东西，他们到达不了，也无法触及的</p>
                        <div class="project-item">
                            <a href="/#/">科学搬砖组</a>
                            <span class="datetime">9小时前</span>
                        </div>
                    </Card>
                </div>
            </Card>
            <div class="bottom">
                <Card>
                    <p slot="title">动态</p>
                    <ul class="list">
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>

                        </li>
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>
                        </li>
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>
                        </li>
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>
                        </li>
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>
                        </li>
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>
                        </li>
                        <li>
                            <p>
                                <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            </p>
                            <div>
                                <p class="list-title">曲丽丽 在 <a href="##">高逼格设计天团</a> 新建项目 <a href="##">八月迭代</a></p>
                                <span class="list-description">9小时前</span>
                            </div>
                        </li>
                    </ul>
                </Card>
            </div>
            </Col>
            <Col span="8">
            <Card>
                <p slot="title">快速开始 / 便捷导航</p>
                <div class="item-group">
                    <a>操作一</a>
                    <a>操作二</a>
                    <a>操作三</a>
                    <a>操作四</a>
                    <a>操作五</a>
                    <a>操作六</a>
                    <Button size="small" icon="ios-add" type="primary" ghost>添加</Button>
                </div>
            </Card>
            <div class="bottom">
                <Card>
                    <p slot="title">XX指数</p>
                    <div id="rada"></div>
                </Card>
            </div>
            <div class="bottom">
                <Card>
                    <p slot="title">团队</p>
                    <Row class-name="members">
                        <Col span="12">
                        <a href="javascript:;">
                            <Avatar size="small" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <span class="member">高逼格设计天团</span>
                        </a>
                        </Col>
                        <Col span="12">
                        <a href="javascript:;">
                            <Avatar size="small" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <span class="member">高逼格设计天团</span>
                        </a>
                        </Col>
                        <Col span="12">
                        <a href="javascript:;">
                            <Avatar size="small" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <span class="member">高逼格设计天团</span>
                        </a>
                        </Col>
                        <Col span="12">
                        <a href="javascript:;">
                            <Avatar size="small" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <span class="member">高逼格设计天团</span>
                        </a>
                        </Col>
                        <Col span="12">
                        <a href="javascript:;">
                            <Avatar size="small" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                            <span class="member">高逼格设计天团</span>
                        </a>
                        </Col>
                    </Row>
                </Card>

            </div>
            </Col>
        </Row>
    </div>
</template>
<style scoped lang="less" rel="stylesheet/less">
    #rada {
        height: 400px;
    }
    .container {
        background-color: #f0f2f5;
        text-align: left;
        .page-header {
            background: #fff;
            padding: 16px 32px 0;
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 15px;
            .detail {
                display: flex;
                margin-top: 15px;
                .row {
                    display: flex;
                    width: 100%;
                }
                .head-info {
                    position: relative;
                    text-align: center;
                    padding: 0 32px;
                    flex: 1;
                    .border {
                        background-color: #e8e8e8;
                        position: absolute;
                        height: 56px;
                        width: 1px;
                        top: 0;
                        right: 0;
                    }
                    span {
                        color: rgba(0, 0, 0, .45);
                        display: inline-block;
                        font-size: 14px;
                        line-height: 22px;
                        margin-bottom: 4px;
                    }
                    p {
                        color: rgba(0, 0, 0, .85);
                        font-size: 24px;
                        line-height: 32px;
                        margin: 0;
                    }
                }
                .avatar {
                    flex: 0 1 72px;
                    margin: 0 24px 8px 0;
                    & > img {
                        border-radius: 72px;
                        display: block;
                        width: 72px;
                        height: 72px;
                    }
                }
                .main {
                    width: 100%;
                    flex: 0 1 auto;
                    .title {
                        flex: auto;
                        font-size: 20px;
                        font-weight: 500;
                        color: rgba(0, 0, 0, .85);
                        margin-bottom: 16px;
                    }
                    .content {
                        margin-bottom: 16px;
                        flex: 1 auto;
                    }
                }
            }
        }
        .bottom {
            margin-top: 15px;
        }


        .members {
            a {
                display: block;
                margin: 12px 0;
                line-height: 24px;
                height: 24px;
                .member {
                    font-size: 14px;
                    color: rgba(0, 0, 0, .65);
                    line-height: 24px;
                    max-width: 100px;
                    vertical-align: top;
                    margin-left: 12px;
                    transition: all 0.3s;
                    display: inline-block;
                }
                &:hover {
                    span {
                        color: #1890ff;
                    }
                }
            }
        }
        .list {
            li {
                display: flex;
                border-bottom: 1px solid #e8e8e8;
                margin-bottom: 11px;
                padding-bottom: 11px;
                > p {
                    margin-right: 16px;
                }
                > div {
                    font-size: 14px;
                    line-height: 22px;
                }
                .list-title {
                    color: rgba(0, 0, 0, .65);
                    margin-bottom: 4px;
                }
                .list-description {
                    color: rgba(0, 0, 0, .45);
                }
            }
            li:last-child {
                border-bottom: none;
            }
        }
        .card_content {
            float: left;
            width: 33%;
        }
        .item-group {
            padding: 20px 0 8px 24px;
            font-size: 0;
            a {
                color: rgba(0, 0, 0, 0.65);
                display: inline-block;
                font-size: 14px;
                margin-bottom: 13px;
                width: 25%;
            }
        }
        .project-item {
            display: flex;
            margin-top: 8px;
            overflow: hidden;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            a {
                color: rgba(0, 0, 0, 0.45);
                display: inline-block;
                flex: 1 1 0;
                &:hover {
                    color: #1890ff;
                }
            }
            .datetime {
                color: rgba(0, 0, 0, 0.25);
                flex: 0 0 auto;
                float: right;
            }
        }
    }
</style>
<script type="text/ecmascript-6">
    let echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/radar')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/legend')
    export default {
        name: 'login',
        props: {},
        data() {
            return {};
        },
        methods: {
            draw() {
                //          雷达图
                let myChart = echarts.init(document.getElementById('rada'))
                myChart.setOption({
                    tooltip: {},
                    color: '#ccc',
                    legend: {
                        data: ['a', 'b', 'c'],
                        y: 'bottom',
                    },
                    radar: {
                        indicator: [
                            {name: '热度', max: 6500},
                            {name: '引用', max: 16000},
                            {name: '信息技术', max: 30000},
                            {name: '客服', max: 38000},
                            {name: '研发', max: 52000},
                        ],
                        splitNumber: '4',
                        center: ['50%', '50%'],
                        splitArea: {
                            areaStyle: {
                                color: '#fff'
                            }
                        },

                        name: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#333',

                            },
                        },
                    },
                    series: [{
                        type: 'radar',
                        symbol: 'roundRect',
                        symbolSize: '8',
                        data: [
                            {
                                value: [4300, 10000, 28000, 3500, 50000, 19000],
                                name: 'a'
                            },
                            {
                                value: [5000, 14000, 2800, 31000, 42000, 21000],
                                name: 'b'
                            },
                            {
                                value: [5000, 1400, 28000, 31000, 4200, 210],
                                name: 'c'
                            }
                        ],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#2fc25b', '#1890ff', '#facc14'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }]
                });

            }
        },
        mounted() {
            this.draw();
        },
        created() {

        },
        components: {}
    }
</script>
